<template>
  <div id="vue">
	  <nav class="left">
		  <router-link to="/vue/data">data</router-link>
	  </nav>
    <div class="contain">
        <router-view></router-view>
    </div>   
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      lists: ["test", "测试"],
      alert: "",
      className: "测试数据"
    };
  },
  computed: {
    filterLists: function() {
      let _t = this;
      let arr = [];
      _t.lists.forEach(element => {
        if (_t.name.length === 0 || element.indexOf(_t.name) !== -1) {
          arr.push(element);
        }
      });
      return arr;
    }
  }
};
</script>

<style lang="stylus" scoped>
#vue
  position relative
  .contain
    float left
    margin-left 60px
nav.left 
  width 200px
  padding 20px 0px
  box-shadow 0 1px 4px #cfcfcf
  float left
  a
    display block
    width 100%
    line-height 30px
    text-align center
    color #555
  a.router-link-active
    background #aaa
</style>


